<template>
  <el-dialog
    :visible.sync="isGlobalActivity"
    :width="width"
    :center="true"
    class="global-activity"
  >
    <template v-if="currentActivity">
      <template slot="title">
        <transition name="slide-fade" mode="out-in">
          <div class="el-dialog__title" :key="index">
            {{currentActivity.name}}
          </div>
        </transition>
      </template>

      <transition name="slide-fade" mode="out-in">
        <div class="global-activity__sub-title" :key="index">{{currentActivity.summary}}</div>
      </transition>

      <transition name="slide-fade" mode="out-in">
        <div class="global-activity__main" :key="index" v-if="currentActivity.dialogType === consts.DIALOG_BANK_CHANGE">
          <global-activity-bank-change :bank-info="currentActivity.content"></global-activity-bank-change>
        </div>
        <div class="global-activity__main" :key="index" v-html="currentActivity.content" v-else></div>
      </transition>

      <div class="global-activity__footer">
        <template v-if="globalActivityList.length > 1">
          <div class="global-activity__nav global-activity__nav--left" @click="prev">
            <svg-icon icon-class="arrow-right" :reverse="true"></svg-icon>
            {{prevActivity.name}}
          </div>
          <div class="global-activity__nav global-activity__nav--right" @click="next">
            {{nextActivity.name}}
            <svg-icon icon-class="arrow-right"></svg-icon>
          </div>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import GlobalActivityBankChange from "./global-activity-bank-change";

  export default {
    name: "global-activity",

    components: {
      GlobalActivityBankChange
    },
    data() {
      return {
        width: '940px',
        index: 0,
      };
    },

    methods: {
      prev() {
        if (this.index <= 0) {
          this.index = this.globalActivityList.length - 1;
        } else {
          --this.index;
        }
      },
      next() {
        if (this.index >= this.globalActivityList.length - 1) {
          this.index = 0;
        } else {
          ++this.index;
        }
      },
      close() {
        this.index = 0;
        this.$store.commit(types.CLOSE_GLOBAL_ACTIVITY);
      },
    },

    computed: {
      currentActivity() {
        return this.globalActivityList[this.index];
      },
      prevActivity() {
        if (this.index === 0) {
          return this.globalActivityList[this.globalActivityList.length - this.index - 1];
        } else {
          return this.globalActivityList[this.index - 1];
        }
      },
      nextActivity() {
        if (this.index === this.globalActivityList.length - 1) {
          return this.globalActivityList[0];
        } else {
          return this.globalActivityList[this.index + 1];
        }
      },
      isGlobalActivity: {
        get() {
          return this.$store.getters.isGlobalActivity;
        },
        set() {
          this.index = 0;
          this.$store.commit(types.CLOSE_GLOBAL_ACTIVITY);
        }
      },
      ...mapGetters([
        'globalActivityList',
      ]),
    },
  };
</script>

<style lang="scss">
  @include b(global-activity) {
    @include e(header) {
    }
    @include e(sub-title) {
      text-align: center;
      color: #2c2c2c;
      padding-bottom: 15px;
      border-bottom: 1px solid $--border-color-base;
    }
    @include e(main) {
      width: 750px;
      height: 250px;
      margin: 35px auto;
      overflow: auto;
    }
    @include e(footer) {
      color: $--color-text-secondary;
      display: flex;
      justify-content: space-between;
    }
    @include e(nav) {
      color: $--color-primary;
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;

      .svg-icon {
        stroke: $--color-primary;
        width: 10px;
        height: 10px;
      }

      @include m(left) {
        .svg-icon {
          margin-right: 10px;
        }
      }
      @include m(right) {
        .svg-icon {
          margin-left: 10px;
        }
      }
    }
  }

</style>